<template>
    <div>
        <div id="mengban"></div>
        <div class="updata">
            <el-form :model="updataPassword">
                 <h1>修改账号密码</h1>
                <el-input placeholder="请输入邮箱账号" v-model="updataPassword.myemail"></el-input>
                <div class="getCode">
                    <el-input  v-model="updataPassword.mycode" placeholder="请输入邮箱验证码"></el-input>
                    <el-button type="primary" @click="getCode3()">获取验证码</el-button>
                </div>
                <el-input placeholder="请输入密码" v-model="updataPassword.mypassword" type="password"></el-input>
                <el-button type="primary" id="quedin" @click="sure()">确认</el-button>
                <el-button type="primary" id="quxiao" @click="close()">取消</el-button>
            </el-form>
        </div>
        <el-container>
            <el-header height="calc(10vh)">
                <img :src="logoUrl" class="logo">
                <el-tabs v-model="activeName" @tab-click="handleClick" tab-position>
                    <el-tab-pane label="招聘" name="first">
                       <el-container>
                        <el-aside width="250px">

                            <div class="info">
                                <div class="left"><img :src="headPicture" class="photo"></div>
                                <div class="right">
                                    <h4>{{companyname}}</h4>
                                    <label>{{companyNumber}}</label>
                                </div>
                            </div>

                            <el-menu :collapse="isCollapse" active-text-color="#3db3b7" default-active="1">
                                <el-menu-item @click="publishR()" index="1">
                                    <span slot="title">发布招聘</span>
                                </el-menu-item>
                                <el-menu-item @click="existingR()" index="2">
                                    <span slot="title">已有招聘</span>
                                </el-menu-item>
                            </el-menu>                           
                        </el-aside>
                        <el-main class="myMain">
                            <!-- 1. activated
                                在 keep-alive 组件激活时调用
                                该钩子函数在服务器渲染期间不被调用
                                2. deactivated
                                在keep-alive 组件停用时调用
                                该钩子函数在服务器渲染期间不被调用 
                                ！！！在组件切换过程中，将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。    
                            -->
                            <keep-alive>
                              <router-view></router-view>
                            </keep-alive>
                            
                        </el-main>
                       </el-container>
                    </el-tab-pane>
                    <el-tab-pane label="档案" name="second">
                        <dang-an></dang-an>
                    </el-tab-pane>
                    <el-tab-pane label="发现" name="third">3</el-tab-pane>
                </el-tabs>
                
                <!-- <i class="el-icon-more-outline infor"></i>
                 -->
                <el-dropdown class="infor" size="medium">  
                    <span>
                        <i class="el-icon-more-outline"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item @click.native="updatePass()">修改密码</el-dropdown-item>
                        <el-dropdown-item>更改头像</el-dropdown-item>
                        <el-dropdown-item @click.native="signOut()">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                    </el-dropdown>
               </el-header>
            
        </el-container>
    </div>
</template>

<script>
import DangAn from '@/components/DangAn'
export default {
    components:{
        DangAn
    },
    name:'Company',
    data(){
        return{
             headPicture:require("../src/image/a.webp"),
             companyname:'',
             companyNumber:'',
             activeName: 'first',
             logoUrl:require('../src/image/logo.png'),
             isCollapse: false,
             updataPassword:{
                myemail:'',
                mycode:'',
                mypassword:''
            },
        }
    },
    methods:{
        handleClick(tab, event) {
           console.log(tab, event);
        },
        handleOpen(key, keyPath) {
        console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        publishR(){
            this.$router.push("/publishRecruitment")
        },
        existingR(){
            this.$router.push("/existingRecruitment")
        },
        //通过token获取企业信息（企业名，头像，练习方式）
        companyInfo(){
           console.log("——————————companyInfo——————————");
           var token = localStorage.getItem("token");
           console.log("Token内容",token);
           depot.get({
                url: 'empservice/company',
                cb: (res)=> {
                    console.log("发送token获取信息",res.data.company);
                     //将获取到的企业名和邮箱存入data中
                    this.companyname = res.data.company.companyname;
                    this.companyNumber = res.data.company.type
                }
                })
        },
         //退出登录
        signOut(){
            if(confirm("确定退出登录？")){
                localStorage.clear();
                this.$router.push("/")  
           }
        },
        //修改个人账号密码
        updatePass(){
            document.querySelector(".updata").style.display = "block";
            document.getElementById("mengban").style.display = "block";
        },
        //获取验证码(改密)
        getCode3(){
          let email = this.updataPassword.myemail;
            console.log(email);
            if(email){
                depot.post({
                url: 'empservice/jobSeeker/send',
                data: {
                     "email": email
                },
                cb: (res)=> {
                    console.log(res)
                    alert("正在发送验证码！")
                }
                })
           }
        },
        //确认(改密)
        sure(){
            let data = this.updataPassword;
            let mycode = data.mycode;
            let myemail = data.myemail;
            let mypassword = data.mypassword;
            if(mycode&&myemail&&mypassword){
                depot.post({
                url: '/empservice/jobSeeker/updatePassword',
                data: {
                    "code": mycode,
                    "email": myemail,
                    "password": mypassword,
                },
                cb: (res)=> {
                    console.log(res);
                    if(res.code == 20000){
                        this.$router.push("/")
                    }else{
                        alert("填写有误，请重新输入！")
                    }
                }
                })
            }else{
                alert("请完成表单内容！")
            }
        },
        //取消(改密)操作
        close(){
            document.querySelector(".updata").style.display = "none";
            document.getElementById("mengban").style.display = "none";
        }
     },
     mounted:function () {   
         //自动触发写入的函数
            this.companyInfo();
            this.publishR();
    },
    created(){
           this.companyInfo();
    }
}
</script>

<style lang="less" scoped> 
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
.el-aside {
    background-color: #fff;
    height: calc(86vh);
}

.info{
    width: 100%;
    height: 100px;
    margin-top: 10px;
//   background-color: #303133;
    .left{
        width: 40%;
        height: 100px;
    //   background-color: aquamarine;
        float: left;
        .photo{
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin: 15px 10px;
        }
    }
    .right{
        width:60%;
        height: 100px;
    //   background-color: antiquewhite;
        float: right;
        margin: 0;
        h4{
            margin: 0;
            width:100%;
            height:30px;
        }
    }
}
.el-header{
    background-color: #303133;
    line-height: calc(10vh);
}
.el-tabs__header{
    margin: 0;
}
</style>
<style lang="less">
body{
    background-color:#eff0f5;
}
.el-dropdown-link {
    cursor: pointer;
    color: #0b83fa;
}
.el-icon-arrow-down {
    font-size: 15px;
}
.el-header{
    .logo{
        float: left;
        color: #fff;
        width: 120px;
        height: 40%;
        margin-top: 20px;
        margin-left: 40px;
    }
    .infor{
        font-size: 30px;
        position: absolute;
        top: 0px;
        right: 30px;
        color: #fff;
    }
    .el-tabs__item{
        margin-left: 10px;
        color: #fff;
        font-size: 24px;
    }
    .el-tabs__item.is-active{
        color: aqua;
    }
    .el-tabs__nav{
        left: 100px;
    }
    .el-tabs__nav-wrap::after{
        background-color:#303133; 
    }
}
.myMain {
    background-color: aqua;
    margin-left: 20px;
    background-color: #fff;
    height: calc(88vh);
    background-image: url('/src/image/backUrl1.png');
    background-size: cover;
  }
.el-menu{
    background-color: none;
    .el-menu-item{
    text-align: center;
    }
    span{
    font-size: 20px;
    }

}

#mengban{
    width: 100%;
    height: calc(100vh);
    position: absolute;
    top: 0;
    background-color: #070707;
    opacity: 0.3;
    z-index: 300;
    display: none;
}
.updata{
    border-radius: 5px;
    box-shadow: 3px 3px 1px #838383;
    display: none;
    font-family: oswald;
    position:absolute;
    width: 27%;
    top: 100px;
    padding: 20px;
    right: 36.5%;
    background-color: #fff;
    z-index: 310;
    .el-input{
        margin: 5px auto;
    }
    h1{
         margin-top: 40px;
         text-align: center;
         color: #444343;
         font-size: 38px;
         opacity: 0.9;
         letter-spacing: 3px;
    }
    #quedin,#quxiao{
        margin-top: 10px;
        background-color: #66b1ff;
        width: 20%;
    }
    #quxiao{
        float: right;
    }
}
.getCode{
    display: flex;
    justify-content: space-between;
    .el-input{
        width: 60%;
        height: 38px;
    }
    .el-button{
        width: 40%;
        height: 38px;
        margin-top: 6px;
        background-color: #66b1ff;
        border: none;
    }
    .el-button:active{
        background-color: #8a8787;
    }
}
</style>